import {defineComponent} from "vue";
import {
    NButton,
    NColorPicker,
    NForm,
    NFormItem,
    NInput,
    NInputNumber,
    NRadio,
    NRadioGroup,
    NSpace,
    NSwitch,
} from "naive-ui";
import type {ColorPickerMode} from "naive-ui/es/color-picker/src/utils";
import type {Desktop} from "@/typings/desktop";

/**
 * GenerateShortcutView  生成快捷方式组件
 */
export default defineComponent({
  name: "GenerateShortcutView",
  setup() {
    const model = ref<Desktop.AppShortcut>({
      // 应用key 唯一标识
      key: "",
      // 应用的组件名字
      component: "",
      // 应用图标
      icon: "",
      // 图标的背景颜色
      iconBgColor: "",
      // 应用标题
      title: "",
      // 标题的字体颜色
      titleColor: "",
      // 标题的背景颜色
      titleBgColor: "",
      // 应用初始的宽度
      width: 1000,
      // 应用初始的高度
      height: 500,
      // 是否为链接
      isLink: false,
      // 应用跳转的类型
      linkType: "in",
      // 应用跳转的地址
      link: "",
      // 应用是否在桌面显示
      isInDeskTop: true,
      // 是否在程序坞中显示
      isInDock: true,
      // 是否在启动台中显示
      isInLaunchpad: true,
      // 是否可以拉伸
      isDisableResize: false,
      // 当关闭时执行隐藏
      whenCloseToHide: false,
    });

    const formRef = ref<HTMLDivElement | Element | null>();

    const colorModels: ColorPickerMode[] = ["hex", "rgb"];
    const colorSwatches = ["#FFFFFF", "#18A058", "#F0A020", "#0de8e8", "#2080F0", "#0e2bf8", "#8409ef", "rgb(232,22,22)"];

    const { copy } = useClipboard();

    return () => (
      <main id="generate-shortcut" class="w-full h-full p-2 flex justify-center overflow-auto">
        <div class="w-2/3 p-1">
          <NForm
            class="w-2/3"
            ref={el => (formRef.value = el as Element)}
            model={model.value}
            labelWidth={180}
            label-placement="left"
            require-mark-placement="right-hanging"
          >
            <NFormItem label="程序的唯一标识" path="key" required>
              <NInput v-model:value={model.value.key} placeholder="程序的唯一标识" />
            </NFormItem>
            <NFormItem label="程序的组件名称" path="component" required>
              <NInput v-model:value={model.value.component} placeholder="程序的组件名称" />
            </NFormItem>
            <NFormItem label="程序的图标" path="icon" required>
              <NInput v-model:value={model.value.icon} placeholder="程序的图标" />
            </NFormItem>
            <NFormItem label="图标的背景颜色" path="iconBgColor">
              <NColorPicker
                v-model:value={model.value.iconBgColor}
                modes={colorModels}
                showPreview={true}
                swatches={colorSwatches}
              />
            </NFormItem>
            <NFormItem label="程序的标题" path="title">
              <NInput v-model:value={model.value.title} placeholder="程序的标题" />
            </NFormItem>
            <NFormItem label="标题的字体颜色" path="titleColor">
              <NColorPicker
                v-model:value={model.value.titleColor}
                modes={colorModels}
                showPreview={true}
                swatches={colorSwatches}
              />
            </NFormItem>
            <NFormItem label="标题的背景颜色" path="titleBgColor">
              <NColorPicker
                v-model:value={model.value.titleBgColor}
                modes={colorModels}
                showPreview={true}
                swatches={colorSwatches}
              />
            </NFormItem>
            <NFormItem label="应用初始的宽" path="width" required>
              <NInputNumber v-model:value={model.value.width} max={1920} min={100} step={50} placeholder="应用初始的宽" />
            </NFormItem>
            <NFormItem label="应用初始的高" path="height" required>
              <NInputNumber v-model:value={model.value.height} max={1080} min={100} step={50} placeholder="应用初始的高" />
            </NFormItem>
            <NFormItem label="应用是否为跳链" path="isLink" required>
              <NSwitch v-model:value={model.value.isLink} />
            </NFormItem>
            {model.value.isLink ? (
              <>
                <NFormItem label="跳转的类型" path="linkType">
                  <NRadioGroup v-model:value={model.value.linkType} name="linkType">
                    <NSpace>
                      <NRadio value="in">内链</NRadio>
                      <NRadio value="out">外链</NRadio>
                    </NSpace>
                  </NRadioGroup>
                </NFormItem>
                <NFormItem label="跳转的地址" path="link">
                  <NInput v-model:value={model.value.link} placeholder="跳转的地址" />
                </NFormItem>
              </>
            ) : null}
            <NFormItem label="是否在桌面显示" path="isInDeskTop" required>
              <NSwitch v-model:value={model.value.isInDeskTop} />
            </NFormItem>
            <NFormItem label="是否在程序坞中显示" path="isInDock" required>
              <NSwitch v-model:value={model.value.isInDock} />
            </NFormItem>
            <NFormItem label="是否在启动台中显示" path="isInLaunchpad" required>
              <NSwitch v-model:value={model.value.isInLaunchpad} />
            </NFormItem>
            <NFormItem label="是否禁用拉伸" path="isDisableResize">
              <NSwitch v-model:value={model.value.isDisableResize} />
            </NFormItem>
            <NFormItem label="是否当关闭时执行隐藏" path="whenCloseToHide">
              <NSwitch v-model:value={model.value.whenCloseToHide} />
            </NFormItem>
          </NForm>
        </div>
        <div class="w-1/3 flex flex-col items-center">
          <pre class="text-lg border border-red-700 p-5 bg-gray-200">{JSON.stringify(model.value, null, 2)}</pre>
          <div class="mt-10">
            <NButton
              type={"info"}
              round
              onClick={async () => {
                await copy(JSON.stringify(model.value, null, 2));
                window.$message.success("复制成功");
              }}
            >
              复制结果值
            </NButton>
          </div>
        </div>
      </main>
    );
  },
});
